<template>
  <el-form-item label="选择时间" class="cycle-picker">
    <el-select
      v-model="timeType"
      style="width: 70px"
      @change="timeTypeChangeHandler"
    >
      <el-option
        v-for="item in timeOptions"
        :key="item.value"
        v-bind="item"
      ></el-option>
    </el-select>
    <el-date-picker
      v-model="timeValue"
      :type="timeType"
      :format="pickerFormatter"
      :picker-options="pickerOptions"
      :clearable="false"
      @change="timeChangeHandler"
    ></el-date-picker>
  </el-form-item>
</template>

<script>
const options = [
  {
    value: 'date',
    label: '日'
  },
  {
    value: 'month',
    label: '月'
  },
  {
    value: 'year',
    label: '年'
  }
];
export default {
  name: 'year-month-picker',
  props: {
    value: String,
    defaultType: {
      type: String,
      default: 'date'
    },
    cycle: {
      type: Array,
      default() {
        return ['date', 'month', 'year'];
      }
    }
  },
  model: {
    prop: 'value',
    event: 'input'
  },
  data() {
    return {
      timeType: 'date',
      pickerOptions: {
        disabledDate(date) {
          return date > new Date();
        }
      }
    };
  },
  computed: {
    timeOptions() {
      return options.filter(item => this.cycle.includes(item.value));
    },
    pickerFormatter() {
      return this.timeType === 'year'
        ? 'yyyy'
        : this.timeType === 'month'
        ? 'yyyy-MM'
        : 'yyyy-MM-dd';
    },
    timeValue: {
      get() {
        return this.value || new Date();
      },
      set(newVal) {
        const format = this.pickerFormatter.toUpperCase();
        const val = this.$dayjs(newVal).format(format);
        this.$emit('input', val);
      }
    }
  },
  created() {
    this.timeType = this.cycle.includes(this.defaultType)
      ? this.defaultType
      : this.cycle[0];
    this.$nextTick(() => {
      const format = this.pickerFormatter.toUpperCase();
      this.$emit('input', this.$dayjs(this.timeValue).format(format));
      this.$emit('change', {
        time: this.timeValue,
        type: this.timeType
      });
    });
  },
  methods: {
    timeTypeChangeHandler() {
      const format = this.pickerFormatter.toUpperCase();
      const time = new Date(this.value);
      this.$emit('input', this.$dayjs(time).format(format));
      this.$emit('change', {
        time: this.timeValue,
        type: this.timeType
      });
    },
    timeChangeHandler() {
      this.$emit('change', {
        time: this.timeValue,
        type: this.timeType
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.cycle-picker {
  &::v-deep .el-select {
    input {
      border-radius: 4px 0px 0px 4px;
      position: relative;
      z-index: 0;

      &:focus,
      &:hover {
        z-index: 1;
      }
    }
    .el-input__suffix {
      z-index: 2;
    }
  }
  &::v-deep .el-date-editor input {
    position: relative;
    border-radius: 0px 4px 4px 0px;
    // border-left: none !important;
    margin-left: -1px;
    z-index: 0;
  }
}
</style>
